<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <link rel="stylesheet" href="./css/detailPage.css">
</head>
<body>
    <div class="detaiBox">
        <div class="TopLeft">
            <div class="leftOne">
                <div class="oneHeader">
                    <img src="./images/headerIcon.jpg" alt="" >
                    <span>码龄7年</span>
                </div>
                <div class="oneMiddle">
                    <table>
                        <tr>
                            <td>92</td>
                            <td>5万+</td>
                            <td>11万+</td>
                            <td>4万+</td>
                            <td>铂金</td>
                        </tr>
                        <tr>
                            <td>原创</td>
                            <td>周排名</td>
                            <td>总排名</td>
                            <td>访问</td>
                            <td>等级</td>
                        </tr>
                    </table>
                    <table style="margin-top: 5px;">
                        <tr>
                            <td>1824</td>
                            <td>70</td>
                            <td style="padding-left: 18px;">155</td>
                            <td style="padding-left: 24px;">11</td>
                            <td>314</td>
                        </tr>
                        <tr>
                            <td>积分</td>
                            <td>粉丝</td>
                            <td style="padding-left: 18px;">获赞</td>
                            <td style="padding-left: 24px;">评论</td>
                            <td style="padding-left: 12px;">收藏</td>
                        </tr>
                    </table>
                </div>
                <div class="oneBottom">
                    <input type="button" value="私信">
                    <input type="button" value="关注">
                </div>
            </div>
            <div class="leftTwo">
                <img src="./images/detailTwoBg.png" alt="">
            </div>
            <div class="leftThree">
                <div class="threeHeader">
                    <h4>分类专栏</h4>
                </div>
                <div class="threeMiddle">
                    <ul>
                        <li>
                            <img src="./images/threeIcon1.png" alt="">
                            <span>大杂烩</span> 
                            <span class="threeSpan2">10篇</span> 
                        </li>
                        <li>
                            <img src="./images/threeIcon2.png" alt="">
                            <span>java</span> 
                            <span class="threeSpan2">5篇</span> 
                        </li>
                        <li>
                            <img src="./images/threeIcon3.png" alt="">
                            <span>C#</span> 
                            <span class="threeSpan2">6篇</span> 
                        </li>
                        <li>
                            <img src="./images/threeIcon4.png" alt="">
                            <span>Vue3.0</span> 
                            <span class="threeSpan2">2篇</span> 
                        </li>
                        <li>
                            <img src="./images/threeIcon5.png" alt="">
                            <span>Flutter</span> 
                            <span class="threeSpan2">5篇</span> 
                        </li>
                        <li>
                            <img src="./images/threeIcon6.png" alt="">
                            <span>Node.js</span> 
                            <span class="threeSpan2">5篇</span> 
                        </li>
                    </ul>
                </div>
            </div>

            <div class="leftFour">
                <div class="fourHeader">
                    <h4>相关推荐</h4>
                </div>
                <div class="fourMiddle">
                    <ul>
                        <li>
                            2024 款：最新前端技术趋势
                            <span>84k阅读 513点赞</span>
                        </li>
                        <li>
                            27岁程序媛未来的出路到底在哪里？
                            <span>32k阅读 113点赞</span>
                        </li>
                        <li>
                            京东一面：post为什么会发送两次请求？
                            <span>14k阅读 513点赞</span>
                        </li>
                        <li>
                            鸿蒙开发，对于前端开发来说，究竟是福是祸呢？
                            <span>843k阅读 1513点赞</span>
                        </li>
                        <li>
                            突然发现，前端好像没几个做到 CTO 的……
                            <span>84k阅读 513点赞</span>
                        </li>
                        <li>
                            使用 Taro 开发鸿蒙原生应用 
                            <span>24k阅读 343点赞</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="leftFive">
                <div class="fiveHeader">
                    <h4>相关推荐</h4>
                </div>
                <div class="fiveMiddle">
                    <a href="">
                        <img src="./images/video1.png" alt="">
                        <p>排序算法</p>
                        <p class="teacherName">pink</p>
                    </a>
                    <a href="">
                        <img src="./images/video2.png" alt="">
                        <p>面试宝典</p>
                        <p class="teacherName">尚硅谷</p>
                    </a>
                    <a href="">
                        <img src="./images/video3.jpg" alt="">
                        <p>云计算</p>
                        <p class="teacherName">老马</p>
                    </a>
                    <a href="">
                        <img src="./images/video4.jpg" alt="">
                        <p>React</p>
                        <p class="teacherName">余胜军</p>
                    </a>
                    <a href="">
                        <img src="./images/video5.jpg" alt="">
                        <p>Flutter</p>
                        <p class="teacherName">小亿</p>
                    </a>
                </div>

            </div> 

        </div>
        <div class="TopRight">
            <div class="TopRight-top">
                <div class="Nav">
                    <h1 class="detailMainTitle"></h1>
                    <span class="detailMainAuthor"></span>
                    <span class="detailMainTime"></span>
                </div>
                <div class="Middle">
                    <span class="detailContent"></span>
                </div>
            </div>
            <div class="pinLunQu">
                <h3>评论56</h3>
                <div class="pinLunQuContent">
                    <div class="pinLunQuHearder">
                            <div class="newSpan">最新</div>
                            <div>|</div>
                            <div>最热</div>
                    </div>
                    <div class="pinLunQuMain">
                        <div>
                            <img src="./images/tou2.jpg" alt="">
                        </div>
                        <div class="pinLunQuText-Box">
                                <div class="pinLunQuUseName">一届农夫</div>
                                <div class="pinLunQuSay">后端的本质还是增删改查</div>
                                <div class="comment-action">
                                    <div class="pinLunQuTime">2023-12-13</div>
                                    <div class="actionImg1">
                                        <img src="./images/点赞.png"  alt="">
                                        65
                                    </div>
                                    <div class="actionImg2">
                                        <img src="./images/回复.png" alt="">
                                        23
                                    </div>
                                </div>
                                <div class="zhuiJiaPinLun">
                                    <div class="zhuiJiaPinLunTouXiang">
                                        <img src="./images/tou3.jpg" alt="">
                                    </div>
                                    <div class="zhuiJiaPinLun-Box">
                                        <div class="comment-action1">
                                            <div class="pinLunQuUseName">麻辣小丸子:&nbsp;</div>
                                            <div class="pinLunQuSay">这个年龄就别死磕技术了，多搞副业吧</div>
                                        </div>
                                        <div class="comment-action">
                                            <div class="pinLunQuTime">2023-12-13</div>
                                            <div class="actionImg1">
                                                <img src="./images/点赞.png"  alt="">
                                                65
                                            </div>
                                            <div class="actionImg2">
                                                <img src="./images/回复.png" alt="">
                                                23
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="zhuiJiaPinLun">
                                    <div class="zhuiJiaPinLunTouXiang">
                                        <img src="./images/tou4.jpg" alt="">
                                    </div>
                                    <div class="zhuiJiaPinLun-Box">
                                        <div class="comment-action1">
                                            <div class="pinLunQuUseName">黑羽:&nbsp;</div>
                                            <div class="pinLunQuSay">大环境不好，这是前提！</div>
                                        </div>
                                        <div class="comment-action">
                                            <div class="pinLunQuTime">2023-12-13</div>
                                            <div class="actionImg1">
                                                <img src="./images/点赞.png"  alt="">
                                                65
                                            </div>
                                            <div class="actionImg2">
                                                <img src="./images/回复.png" alt="">
                                                23
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="zhuiJiaPinLun">
                                    <div class="zhuiJiaPinLunTouXiang">
                                        <img src="./images/tou5.jpg" alt="">
                                    </div>
                                    <div class="zhuiJiaPinLun-Box">
                                        <div class="comment-action1">
                                            <div class="pinLunQuUseName">小锁同学:&nbsp;</div>
                                            <div class="pinLunQuSay">在国内做国外公司的活 需要英语水平过硬</div>
                                        </div>
                                        <div class="comment-action">
                                            <div class="pinLunQuTime">2023-12-13</div>
                                            <div class="actionImg1">
                                                <img src="./images/点赞.png"  alt="">
                                                65
                                            </div>
                                            <div class="actionImg2">
                                                <img src="./images/回复.png" alt="">
                                                23
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="zhuiJiaPinLun">
                                    <div class="zhuiJiaPinLunTouXiang">
                                        <img src="./images/tou6.jpg" alt="">
                                    </div>
                                    <div class="zhuiJiaPinLun-Box">
                                        <div class="comment-action1">
                                            <div class="pinLunQuUseName">疾行的蚂蚁:&nbsp;</div>
                                            <div class="pinLunQuSay">考公务员，或者搞点投入低的店，比如彩票店，即使亏钱又不会太多</div>
                                        </div>
                                        <div class="comment-action">
                                            <div class="pinLunQuTime">2023-12-13</div>
                                            <div class="actionImg1">
                                                <img src="./images/点赞.png"  alt="">
                                                65
                                            </div>
                                            <div class="actionImg2">
                                                <img src="./images/回复.png" alt="">
                                                23
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="pinLunQuMain">
                        <div>
                            <img src="./images/tou7.jpg" alt="">
                        </div>
                        <div class="pinLunQuText-Box">
                                <div class="pinLunQuUseName">
                                    胖有贵的道理
                                  </div>
                                <div class="pinLunQuSay">这才是人生呀，打工人是没有归宿的</div>
                                <div class="comment-action">
                                    <div class="pinLunQuTime">2023-12-13</div>
                                    <div class="actionImg1">
                                        <img src="./images/点赞.png"  alt="">
                                        65
                                    </div>
                                    <div class="actionImg2">
                                        <img src="./images/回复.png" alt="">
                                        23
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="pinLunQuMain">
                        <div>
                            <img src="./images/tou8.jpg" alt="">
                        </div>
                        <div class="pinLunQuText-Box">
                                <div class="pinLunQuUseName">
                                    前端佬狗
                                  </div>
                                <div class="pinLunQuSay">关键词：程序员的待遇就是个开口向下的抛物线</div>
                                <div class="comment-action">
                                    <div class="pinLunQuTime">2023-12-13</div>
                                    <div class="actionImg1">
                                        <img src="./images/点赞.png"  alt="">
                                        65
                                    </div>
                                    <div class="actionImg2">
                                        <img src="./images/回复.png" alt="">
                                        23
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="pinLunQuMain">
                        <div>
                            <img src="./images/tou9.jpg" alt="">
                        </div>
                        <div class="pinLunQuText-Box">
                                <div class="pinLunQuUseName">
                                    防毒面具
                                  </div>
                                <div class="pinLunQuSay">我在你这个年龄的时候是选择义无反顾的冲向大城市。</div>
                                <div class="comment-action">
                                    <div class="pinLunQuTime">2023-12-13</div>
                                    <div class="actionImg1">
                                        <img src="./images/点赞.png"  alt="">
                                        65
                                    </div>
                                    <div class="actionImg2">
                                        <img src="./images/回复.png" alt="">
                                        23
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="pinLunQuMain">
                        <div>
                            <img src="./images/tou10.jpg" alt="">
                        </div>
                        <div class="pinLunQuText-Box">
                                <div class="pinLunQuUseName">
                                    分蛋糕
                                  </div>
                                <div class="pinLunQuSay">卡里的余额是重点</div>
                                <div class="comment-action">
                                    <div class="pinLunQuTime">2023-12-13</div>
                                    <div class="actionImg1">
                                        <img src="./images/点赞.png"  alt="">
                                        65
                                    </div>
                                    <div class="actionImg2">
                                        <img src="./images/回复.png" alt="">
                                        23
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="pinLunQuMain">
                        <div>
                            <img src="./images/tou11.jpg" alt="">
                        </div>
                        <div class="pinLunQuText-Box">
                                <div class="pinLunQuUseName">
                                    姜太公摸鱼
                                  </div>
                                <div class="pinLunQuSay">祝博主不忘初心，升职加薪</div>
                                <div class="comment-action">
                                    <div class="pinLunQuTime">2023-12-13</div>
                                    <div class="actionImg1">
                                        <img src="./images/点赞.png"  alt="">
                                        65
                                    </div>
                                    <div class="actionImg2">
                                        <img src="./images/回复.png" alt="">
                                        23
                                    </div>
                                </div>
                        </div>
                    </div>
                    
                    
                    </div>
                </div>

                <div class="TopRight-bottom">
                    <div class="TopRight-bottom-left">
                        <img src="./images/TopRight-bottomBg.jpg" alt="">
                        <img class="i_tri" src="./images/i_tri.png" alt="">
                        <span>
                            根据乡村使用场景定制微信公众号，
                            形成由村、乡镇、区县、州市组成的公众号集群服务村民，
                            打造手机上的“为村民服务中心”。
                        </span>
                    </div>
                    <div class="TopRight-bottom-right">
                        <div class="bottom-right-text">
                            <h2>连接</h2>
                            <h2>责任与信任</h2>
                            <h5>聚合微小善行，以科技让世界更美好</h5>
                            <p><span class="bottom-right-bg"></span></p>
                        </div>
                    </div>    
                </div>
            </div>
        </div>

        
        <div class="Bottom">
            <marquee class="Bottom-marque" loop="-1"  direction="left"  onmouseover="this.stop()" onmouseout="this.start()"  >
                <img src="./images/ad2.jpg" alt="">
                <img src="./images/ad3.jpg" alt="">
                <img src="./images/ad4.jpg" alt="">
                <img src="./images/ad5.jpg" alt="">
                <img src="./images/ad.jpg" alt="">
            </marquee>
        </div>
        <div class="garbageAd">
            <div>
                <img onclick="garbageAdFn()" class="closeAd" src="./images/closeIcon.png" alt="">
                <img class="openAd" src="./images/garbage.png" onclick="openAdFn()">
            </div>
        </div>   
    </div>

    <script>
        let obj = JSON.parse(localStorage.getItem('data'));
        if(obj==null){
            let detailContent = document.getElementsByClassName('detailContent')[0];
            let detailMainTitle = document.getElementsByClassName('detailMainTitle')[0];
            detailMainTitle.innerText='3秒后自动跳转首页...';
            detailContent.innerText='这里什么都没有...请从首页点击文章后再进行阅览';
            setTimeout(() => {
                window.location.href='./index.html';
            }, 5000);
            localStorage.clear();
        }else{
            let detailMainTitle = document.getElementsByClassName('detailMainTitle')[0];
            let detailMainAuthor = document.getElementsByClassName('detailMainAuthor')[0];
            let detailMainTime = document.getElementsByClassName('detailMainTime')[0];
            let detailContent = document.getElementsByClassName('detailContent')[0];
            detailMainTitle.innerText=obj.title;
            detailMainAuthor.innerText=`作者：${obj.author}`;
            detailMainTime.innerText=`发布时间：${obj.pubulishTime}`;
            detailContent.innerText=obj.content;
            
        }
        var garbageAd = document.getElementsByClassName("garbageAd")[0];
        setTimeout(() => {
            garbageAd.style.display='block';
        }, 3000);
        function garbageAdFn(){
            garbageAd.style.display='none';
            setInterval(() => {
            garbageAd.style.display='block';
            }, 2000);
        }
        function openAdFn(){
           
        }
    </script>
    <script src="./index.js"></script>

</body>
</html>